<template>
  <el-aside width="auto">
    <el-row>
      <el-col :span="12">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#409eff"
          router
          :collapse="isCollapse"
        >
          <div class="nav-title">
            <!-- <i class="el-icon-notebook-1" v-if="isCollapse"></i> -->
            <h4 v-if="isCollapse">BOOK</h4>
            <h4>图书管理系统</h4>
          </div>

          <el-menu-item index="/home">
            <i class="el-icon-house"></i>
            <span slot="title">主页</span>
          </el-menu-item>
          <!-- --------- -->
          <!-- <el-submenu index="1">
						<template slot="title">
							<i class="el-icon-user"></i>
							<span>用户管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/superUser">
								<i class="el-icon-menu"></i>
								<span slot="title">管理员管理</span>
							</el-menu-item>
							<el-menu-item index="/user">
								<i class="el-icon-menu"></i>
								<span slot="title">读者管管理</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu> -->
          <!-- --------- -->
          <!-- --------- -->
          <!-- <el-submenu index="2">
						<template slot="title">
							<i class="el-icon-takeaway-box"></i>
							<span>分类管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/classify">
								<i class="el-icon-menu"></i>
								<span slot="title">类别管理</span>
							</el-menu-item>
							<el-menu-item index="/shelf">
								<i class="el-icon-menu"></i>
								<span slot="title">书架管理</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu> -->
          <!-- --------- -->
          <!-- --------- -->
          <!-- <el-submenu index="3">
						<template slot="title">
							<i class="el-icon-reading"></i>
							<span>图书管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/list">
								<i class="el-icon-menu"></i>
								<span slot="title">图书管理</span>
							</el-menu-item>
							<el-menu-item index="/borrow">
								<i class="el-icon-menu"></i>
								<span slot="title">借阅管理</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu> -->
          <!-- --------- -->

          <template v-for="item in menuList">
            <template v-if="item.children">
              <el-submenu :index="item.id + ''" :key="item.path">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item
                  v-for="subItem in item.children"
                  :index="'/' + subItem.path"
                  :key="subItem.index"
                >
                  <i :class="subItem.icon"></i>
                  <span>{{ subItem.name }}</span>
                </el-menu-item>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="'/' + item.path" :key="item.path">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      isCollapse: false,
      menuList: [],
    };
  },
  methods: {},
  mounted() {
    this.$bus.$on("getFold", (value) => {
      this.isCollapse = value;
    });
  },
  created() {
    this.menuList = this.$store.state.menuList;
  },
};
</script>

<style scoped>
/* 去除 导航 侧边 小白条 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  border: none;
}
.nav-title {
  text-align: center;
  color: #fff;
  height: 56px;
  line-height: 56px;
}

.el-menu--collapse {
  height: 100vh;
}
.el-menu-item,
.el-submenu__title span {
  font-size: 13px;
}
</style>
